<template>
    <div class="app-container">
        <div style="margin: 10px 0px; ">
            <el-select v-model="cdkStatus" @change="getCdkList" placeholder="可使用">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <!-- <el-button type="primary" @click="getCdkList" style="margin: 0px 10px ; ">确 定</el-button> -->
        </div>
        <div :loading="pageLoading">
            <!-- 表格 -->
            <el-table :data="listData" border style="width: 100%" height="75vh">
                <el-table-column v-for="item in tableData" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" :minWidth="item.minWidth" align="center" sortable>
                    <template slot="header" slot-scope="scope">
                        <span>{{ item.label }}</span>
                    </template>
                    <template slot-scope="scope">
                        <template v-if="item.prop == 'status'">
                            <span v-if="scope.row.status == 0">可使用</span>
                            <span v-if="scope.row.status == 1">已使用</span>
                            <span v-if="scope.row.status == 2">已过期</span>
                        </template>

                        <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页 -->
            <template>
                <div class="block" align="center" style="background-color:#ffffff;padding: 10px;">
                    <el-pagination :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="cdkCounts" @current-change="getCurrentPage" @size-change="changePageSize">
                    </el-pagination>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
import { getCdkList } from "@/api/cdk";
export default {
    name: "CdkIndex",
    data () {
        return {
            pageLoading: false,
            submitLoading: false,
            cdkCounts: 0,
            currentPage: 1,
            pageSize: 50,
            pageSizes: [20, 30, 40, 50],
            dialogVisible: false,
            tableData: [
                { prop: "cdkTypeId", label: "CDK类ID" },
                { prop: "cdkey", label: "CDKEY",minWidth:240 },
                { prop: "canUseTimes", label: "可使用次数" },
                { prop: "hadUseTimes", label: "已使用次数" },
                { prop: "bAll", label: "总数" },
                { prop: "status", label: "状态" },
            ],
            listData: [],
            cdkStatus: 0,
            options: [{
                value: 0,
                label: '可使用'
            }, {
                value: 1,
                label: '已使用'
            }, {
                value: 2,
                label: '已过期'
            }],
        }
    },
    mounted () {
        this.getCdkList()
    },
    methods: {
        //默认每页条数请求
        async getCdkList () {
            this.currentPage = 1
            this.getAjax()
        },
        //列表数据请求
        async getAjax () {
            this.pageLoading = true
            try {
                let params = {
                    cdkTypeId: this.$route.params.id,
                    page: this.currentPage,
                    limit: this.pageSize,
                    status: this.cdkStatus
                }
                let res = await getCdkList(params)
                res.data.results = res.data.results || []

                this.listData = res.data.results.map(r => {
                    r.hadUseTimes = r.bAll === 0 ? 0 : r.bAll - r.canUseTimes
                    return r
                })

                this.cdkCounts = res.data.counts
                this.pageLoading = false
            } catch (err) {
                console.log(err);
                this.pageLoading = false
            }
        },

        //修改当前页数
        getCurrentPage (scope) {
            this.currentPage = scope
            this.getAjax()
        },
        //修改每页条数
        changePageSize (scope) {
            this.pageSize = scope
            this.getAjax()
        },
    },
}
</script>
<style>
</style>